<template>
  <div>
    <div class="top_year_selecct">
            <flexbox :gutter="0">
          <flexbox-item>   
              <div class="top_year_selecct_div" @click="showYear=true">
                  <span>{{selectYear.value}}学年</span><icon type="unfold" />
                   <div class="shu_line_one_px shu_line_year"></div>
              </div>
          </flexbox-item>
          <flexbox-item>
               <div class="top_year_selecct_div"  @click="showTerm=true">
                  <span>{{selectTerm.value}}</span><icon type="unfold"/>
              </div>
          </flexbox-item>
        </flexbox>
    </div>
<div v-transfer-dom>
    <popup class="select_year_div" v-model="showYear">
        <!-- group already has a top border, so we need to hide header's bottom border-->
        <popup-header
        :left-text="'取消'"
        :right-text="'确定'"
        :title="'学年选择'"
        :show-bottom-border="false"
        @on-click-left="showYear = false"
        @on-click-right="showYear = false"></popup-header>
        <group class="select_group" gutter="0">
          <radio @on-change="doSelectYearOk" :options="yearList"></radio>
        </group>
    </popup></div><div v-transfer-dom>
    <popup  class="select_year_div" v-model="showTerm">
        <!-- group already has a top border, so we need to hide header's bottom border-->
        <popup-header
        :left-text="'取消'"
        :right-text="'确定'"
        :title="'学期选择'"
        :show-bottom-border="false"
        @on-click-left="showTerm = false"
        @on-click-right="showYear = false"></popup-header>
        <group class="select_group" gutter="0">
          <radio  @on-change="doSelectTermOk" :options="termList"></radio>
        </group>
    </popup></div>
  
  </div>
</template>

<script>
import baseService from '../shared/service/baseService'

import { PopupHeader,Popup,  Group, Selector,Cell,Radio,dateFormat } from 'vux'

export default {
  components: { PopupHeader,Popup, Group, Selector, Cell,Radio ,dateFormat},
  name: "selectYearAndTeam",
  props: ["okText","noText","endDateStr","startDateStr"], /* okEvent 文件上传完成事件 */
  data() {
     var  nowDateStr = dateFormat(new Date(), 'YYYY-MM-DD');
    return {
      yearList: [],
      termList: [],
      termDataList: [],
      showYear:false,
      showTerm:false,
      selectYear:{key:"",value:""},
      selectTerm:{key:"all",value:"不限"},
      nowDateStr :  nowDateStr,
    };
  },
  created() {
    this.getYearList();
  },
  methods: {
     getYearList() {
        this.$vux.loading.show();
        baseService.getYearList().then((res)=>{
          var data = res.data;
          var isNoSelect = true;
          for (let i = 0; i < data.length; i++) {
             const po = data[i];
             po.beginDate =  dateFormat(this.$commonUtil.getDate(po.beginDate), 'YYYY-MM-DD');
             po.endDate =  dateFormat(this.$commonUtil.getDate(po.endDate), 'YYYY-MM-DD');
             po.key=po.id;
             po.value=po.name;
             if(this.startDateStr && this.endDateStr){
              if(po.beginDate == this.startDateStr.substring(0,10) && po.endDate == this.endDateStr.substring(0,10) ){
                    isNoSelect = false;
                    this.selectYear=po;
                this.doOutEvent(po.beginDate,po.endDate);
              }
             }else  if(isNoSelect && this.selectYear && po.beginDate.substring(0,10) <= this.nowDateStr && po.endDate.substring(0,10) >= this.nowDateStr ){
                isNoSelect = false;
                this.selectYear=po;
                this.doOutEvent(po.beginDate,po.endDate);
             }
          }
          this.yearList=data;
          this.getTermList();
        });
    },
    setTermDataList(isNoChangeTerm){
      var list=[{key:"all",value:"不限学期"}];
      for (let i = 0; i < this.termDataList.length; i++) {
          const po = this.termDataList[i];
          po.key=po.id;
          po.value=po.name;
          if(po.name==1){
               po.value="上学期";
          }else if(po.name==2){
               po.value="下学期";
          }
          if(po.schoolYearId ==  this.selectYear.id){
               list.push(po);
          }
      
      }
      this.termList=list;
      if(isNoChangeTerm){
          return;
      }
      this.selectTerm=list[0];
    },
    getTermList() {
        baseService.getTermList().then((res)=>{
          var data = res.data;
          var isNoChangeTerm = false;
         for (let i = 0; i < data.length; i++) {
            var po = data[i];
            po.beginDate =  dateFormat(this.$commonUtil.getDate(po.beginDate), 'YYYY-MM-DD');
            po.endDate =  dateFormat(this.$commonUtil.getDate(po.endDate), 'YYYY-MM-DD');
            po.checked=false;
            po.key=po.id;
            po.value=po.name;
            if( this.startDateStr && this.endDateStr){
              if(po.beginDate == this.startDateStr.substring(0,10) && po.endDate == this.endDateStr.substring(0,10) ){
                  this.selectTerm=po;
                  this.selectYear= this.$commonUtil.getInArr(this.yearList,"key",po.schoolYearId);
                  this.doOutEvent(po.beginDate,po.endDate);
                  isNoChangeTerm=true;
              }
            }
            

          }
          
          this.termDataList=data;
          this.setTermDataList(isNoChangeTerm);
          this.$vux.loading.hide();
        });
    },
    doSelectYearOk(value, label) {
      this.selectYear = this.$commonUtil.getInArr(this.yearList,"key",value);
      this.setTermDataList();
      this.doOutEvent( this.selectYear.beginDate, this.selectYear.endDate);
   //   this.$emit('okEvent',this.dataId,label,this.showType);
      this.showYear=false;
    },
    doSelectTermOk(value, label) {
      this.selectTerm = this.$commonUtil.getInArr(this.termList,"key",value);
      if( this.selectTerm.beginDate){
        this.doOutEvent( this.selectTerm.beginDate, this.selectTerm.endDate);
      }else   if(value=="all"){
        this.doOutEvent( this.selectYear.beginDate, this.selectYear.endDate);
      }
      this.showTerm=false;
    },
    doOutEvent(startDate,endDate){
        var startDateStr =  dateFormat(this.$commonUtil.getDate(startDate), 'YYYY-MM-DD') +" 00:00:00";
        var endDateStr =  dateFormat(this.$commonUtil.getDate(endDate), 'YYYY-MM-DD') +" 23:59:59";
        this.$emit('okEvent',startDateStr,endDateStr);
    }
  }
};
</script>

<style scoped>
.top_year_selecct_div{
    height: 50x;
    text-align: center;
    background: #F3FCFF;
}
.top_year_selecct_div span{
    line-height: 50px;
}
.top_year_selecct_div .weui_icon{
    color: #28BAD9;
}
.shu_line_year.shu_line_one_px{
    background: #C8C8C8;
    margin-top: 15px;
}
</style>